<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="header">
			<text>安装回单</text>
			<view class="btn_bc">
				<button type="default" size="mini"><text class="text">保存</text></button>
			</view>
			<view class="btn_tj">
				<button type="default" size="mini"><text class="text">提交</text></button>
			</view>
		</view>

		<!-- 填表 -->
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
			@scrolltolower="lower" @scroll="scroll">
			<view class="titlebar">
				<text>用户信息</text>
			</view>
			<!-- 用户信息 -->
			<view class="user">
				<view class="username">
					<text>用户姓名:</text>
				</view>
				<!-- 输入用户姓名 -->
				<view class="sr_input">
					<input class="uni-input" placeholder="请输入用户姓名" />
				</view>
			</view>
			<view class="line-h"></view>

			<view class="user">
				<view class="username">
					<text>联系电话:</text>
				</view>
				<!-- 输入联系电话 -->
				<view class="sr_input">
					<input class="uni-input" placeholder="请输入联系电话" />
				</view>
			</view>
			<view class="line-h"></view>

			<view class="user">
				<view class="username">
					<text>所在区域:</text>
				</view>
				<!-- 输入用户姓名 -->
				<view class="sr_input">
					<input class="uni-input" placeholder="请输入所在区域" />
				</view>
			</view>
			<view class="line-h"></view>

			<view class="user">
				<view class="username">
					<text>详细地址:</text>
				</view>
				<!-- 输入详细地址 -->
				<view class="sr_input">
					<input class="uni-input" placeholder="请输入详细地址" />
				</view>
			</view>




			<!-- 购买信息 -->
			<view class="titlebar">
				<text>购买信息</text>
			</view>

			<view class="user">
				<view class="username">
					<text>购买商城:</text>
				</view>
				<!-- 输入商城 -->
				<view class="sr_input">
					<input class="uni-input" placeholder="请输入商城名称" />
				</view>
			</view>
			<view class="line-h"></view>

			<view class="user">
				<view class="username">
					<text>购买日期:</text>
				</view>
				<!-- 输入日期 -->
				<view class="sr_input">
					<!-- value 表示选中的日期，格式为"YYYY-MM-DD"
				     start 表示有效日期范围的开始，字符串格式为"YYYY-MM-DD" 
					 end   表示有效日期范围的结束，字符串格式为"YYYY-MM-DD" :end="endDate"
				 -->
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>
			</view>



			<!-- 业务信息 -->
			<view class="titlebar">
				<text>业务信息</text>
			</view>
			<!-- 楼层高度 -->
			<view class="user">
				<view class="username">
					<text>楼层高度:</text>
				</view>
				<!-- 输入楼层高度 -->
				<view class="sr_input">
					<input class="uni-input" placeholder="请输入楼层高度" />
				</view>
			</view>

			<!-- 房间面积 -->
			<view class="user">
				<view class="username">
					<text>房间面积:</text>
				</view>
				<!-- 输入房间面积 -->
				<view class="sr_input">
					<input class="uni-input" placeholder="请输入房间面积" />
				</view>
			</view>
			<view class="line-h"></view>

			<!-- 机器信息 -->
			<view class="titlebar">
				<text>配件选购</text>
			</view>
			<view class="user">
				<view class="username">
					<view style="display: flex;">
						<checkbox></checkbox>
						<label>
							<view class="weixiu_shop">
								<image style="width: 100px;height: 100px;display: flex;"
									src="../../../static/peijianku/neiji3.jpg"></image>
								<view>
									<input type="text" label="" v-model="pwijianleixing"></input>
									<view style="display: flex;">
										<text>库存：</text>
										<input type="text" v-model="peij_kucun"></input>
									</view>
									<view style="display: flex;color: #FF0000;">
										<view>￥:</view>
										<input type="text" v-model="peijian_jiage"></input>
									</view>
									<view class="example-body">
										<uni-number-box></uni-number-box>
									</view>
								</view>
							</view>
						</label>
					</view>
				</view>
			</view>
			
			<view class="weiiu_box_jia">
				<uni-icons type="plus" class="icons1" color="#007AFF" size="55" @click="peijianku"></uni-icons>
			</view>
			
			<view class="weiiu_box_jiesuan">
				<checkbox></checkbox>
				<view>
					<text style="margin-left: 20px;font-size: 12px;">全选</text>
					<text style="margin-left: 20px;font-size: 12px;color: #FF0000;">删除</text>
					<text style="margin-left: 20px;font-size: 12px;">总计:</text>
					<text style="font-size: 12px;font-size: 20px;color: #FF0000;">￥:5000</text>		
				</view>
				<view>
					<button class="btn_weixiu_xiadan">下单</button>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				/* 配件库维修单 */
				pwijianleixing: "空调排水管",
				peij_kucun: "50",
				peijian_jiage: "40",

				title: 'label',
				index: 0,
				date: currentDate,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				value: '',

				//图片样式
				imageStyles: {
					width: 100,
					height: 120,
					// border: {
					// 	color: "#ff5a5f",
					// 	width: 6,
					// 	style: 'dashed',
					// 	radius: '2px'
					// }

				},
				listStyles: {
					// 是否显示边框
					border: true,
					// 是否显示分隔线
					dividline: true,
					// 线条样式
					borderStyle: {
						width: 1,
						color: 'blue',
						radius: 2
					}
				},

			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			peijianku:function  (e) {
				uni.navigateTo({
					url:'../ddaohang/xuanxiangka'
				})
			},
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// 只允许通过相机扫码
			shaoma() {
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			}


		}
	}
</script>

<style>
	.btn_weixiu_xiadan {
		
		width: 65px;
		height: 50px;
		text-align: center;
		font-size: 15px;
		margin-left: 57px;
		background-color: #007AFF;
		color: #ffffff;
	}

	.weiiu_box_jiesuan {
		display: flex;
		background-color: #FFFFFF;
		height: 50px;
		border: 1px solid black;
	}

	.weiiu_box_jia {
		background-color: #FFFFFF;
	}

	.example-body {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-left: 100px;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;

	}

	.weixiu_shop {
		height: 120px;
		width: 360px;
		display: flex;
		background-color: #ffffff;
	}

	.flie_css {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.sf_pz {
		align-self: center;
	}

	.input_sf_ty {
		margin-left: 15px;
		/* background-color: #007AFF; */
	}

	.sf_ty_css {
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;
		font-size: 13px;
	}

	.sf_css {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		background-color: #FFFFFF;
	}

	.header {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		/* justify-content: space-between; */
		/* margin-top: 2px; */
		padding-top: 5px;
		padding-bottom: 10px;
		background-color: #ffffff;
		height: 40px;
	}


	page {
		width: 100%;
		background-color: #EEEEEE;
		min-height: 100%;
	}


	.btn {
		font-size: 5px;

	}

	button::after {
		border: none;

	}

	.text {
		color: #007AFF;
	}

	/* 提交 */
	.btn_bc {
		/* 相对定位 relative */
		/*position: relative;
		left: 90px;
		top: 10px; */
		/* 绝对定位 absolute*/
		position: absolute;
		right: 65px;
		top: 10px;

	}

	/* 提交 */
	.btn_tj {
		/* 相对定位 relative */
		/*position: relative;
		left: 90px;
		top: 10px; */
		/* 绝对定位 absolute*/
		position: absolute;
		right: 5px;
		top: 10px;
	}

	/* 通用样式 */
	.userdata {
		font-size: 14px;
		/* margin-bottom: 100px; */
		padding-top: 5px;
		padding-bottom: 5px;
		background-color: #FFFFFF;

	}

	.titlebar {
		font-size: 14px;
		/* margin-bottom: 100px; */
		padding-top: 5px;
		padding-bottom: 5px;
		/* background-color: #aaa7a6; */
	}

	.user {
		font-size: 15px;
		display: flex;
		background-color: #FFFFFF;
		/* 		padding-top: 5px;
		padding-bottom: 5px; */

	}

	.username {
		width: 65px;
		/* background-color: #4CD964; */
		padding-top: 5px;
		padding-bottom: 5px;

	}

	.line-h {
		height: 1rpx;
		background-color: #cccccc;
	}

	.sr_input {
		/* 相对定位 */
		/* width: 200px;
		height: 20px;
		font-size: 14px;
	    background-color: #5555ff;
		position: relative;
		float: left;
		top: -65rpx;
		left: 140rpx;
		
		padding-top: 5px;
		padding-bottom: 6px; */

		padding-top: 4px;
		padding-bottom: 6px;
	}

	.xh1_css {
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		background-color: #FFFFFF;
	}

	.xh1 {
		margin-top: 5px;
		font-size: 14px;
	}

	.btn_xh {
		align-self: center;
	}

	.text_bj {
		/* font-size: 14px; */
		/* margin-bottom: 100px; */
		/* 	padding-top: 5px; */
		/* padding-bottom: 5px; */
		/* 	text-align: right; */
		/* 	margin-right: 3px; */
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;

	}

	.text_bjt {
		font-size: 14px;
		padding-top: 5px;
		padding-bottom: 5px;
		margin-right: 5px;
		/* position: relative;
		left: 340rpx; */
		float: right;
		;
	}

	.photo_xc {
		/* 水平布局 */
		display: flex;
		/* margin-left: 10px; */
		flex-direction: row;
		justify-content: space-around;
		padding-top: 5px;
		background-color: #ffffff;
	}

	.photo_ty {
		margin-left: 15px;
		margin-right: 15px;
	}

	.lz_ty {
		/* margin-top: 0px;
		padding-top: 0px;
		margin-left: 20px;
		margin-right: 15px; */
		color: #007AFF;
	}

	.text_ty {
		font-size: 12px;
		/* margin-left: 40px;
		margin-right: 30px; */
	}

	.text_xty {
		font-size: 12px;
		/* 	margin-left: 30px;
		margin-right: 30px; */
		background-color: #FFFFFF;
	}

	.text_xc {
		/* 水平布局 */
		display: flex;
		/* margin-left: 10px; */
		flex-direction: row;
		justify-content: space-around;
		z-index: 1;
		background-color: #FFFFFF;

		/* 相对位置 */
		position: relative;
		bottom: 30px;
		right: 8px;
	}

	.tp_color {
		background-color: #FFFFFF;
	}

	.cklz_xc {
		/* 水平布局 */
		display: flex;
		/* margin-left: 10px; */
		flex-direction: row;
		justify-content: space-around;
		position: relative;
		bottom: 10px;

	}
</style>
